<template>
  <div>
    <span v-if="false">
      <a-button @click="visible = true">{{ t["批量上传"] }}</a-button>
    </span>

    <a-modal v-model:visible="visible" :maskClosable="false">
      <a-form :model="libraryForm" layout="vertical">
        <a-form-item :label="t['素材类型']" required field="type">
          <a-radio-group v-model="libraryForm.type" :options="typeOptions"> </a-radio-group>
        </a-form-item>

        <a-form-item :label="t['素材尺寸']" field="sizeId" required>
          <a-select v-model="libraryForm.sizeId" :options="sizeOptions"></a-select>
        </a-form-item>
        <a-form-item v-if="libraryForm.type && libraryForm.sizeId">
          <a-upload
            v-model:fileList="fileList"
            name="file"
            multiple
            :accept="accept()"
            draggable
            :headers="{
              Authorization: getToken()
            }"
            :customRequest="customRequest"
          ></a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getToken } from "@/store/modules/user/utils";
import { RequestOption } from "@arco-design/web-vue";
import { libraryForm } from "../data/form";
import { sizeOptions, typeOptions } from "../data/options";
import { checkResource, createMediaForm, uploadMediaFile } from "./utils";
const t = translate("公共模块");

const fileList = ref();
const url = ref();
const BASE_URL = import.meta.env.VITE_BASEURL;
const visible = ref();
const accept = () => {
  const mime: any = {
    "0": "image/*",
    "1": "video/mp4,video/avi",
    "2": ".ttf, .otf, .woff, .woff2"
  };
  return mime[libraryForm.value.type];
};
const customRequest: any = async (option: RequestOption) => {
  const { fileItem, name } = option;
  if (fileItem.file) {
    const result = await checkResource(fileItem.file);

    if (result) {
      const href = await uploadMediaFile(fileItem);

      libraryForm.value.uri = `${href}`;

      await createMediaForm(fileItem);
      visible.value = false;
    }
  }
  return {
    customRequest
  };
};
</script>

<style lang="scss" scoped></style>
